<!-- 新增编辑模型 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="35%"
    destroy-on-close
  >
    <div
      class="form-box"
      style="max-height: 500px; overflow: hidden; overflow-y: auto"
    >
      <el-form
        ref="operaDialogRef"
        :rules="rules"
        :model="dialogForm"
        label-width="120px"
      >
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="dialogForm.name"
            placeholder="请输入字典名称"
            autocomplete="false"
          />
        </el-form-item>
        <el-form-item label="编码：" prop="code">
          <el-input
            v-model="dialogForm.code"
            placeholder="请输入字典编码"
            autocomplete="false"
          />
        </el-form-item>
        <el-row type="flex">
          <el-form-item label="所属父级：" prop="parentId">
            <el-select
              v-model="dialogForm.parentId"
              filterable
              placeholder="请选择父级"
            >
              <el-option
                v-for="item in parentArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="dialogForm.sort" placeholder="请输入序号" />
        </el-form-item>
        <el-row type="flex">
          <el-form-item label="是否启用：" prop="enableState">
            <el-select
              v-model="dialogForm.enableState"
              filterable
              placeholder="请选择子系统"
            >
              <el-option
                v-for="item in enableStateArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialog">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: "OperaDialog",
  data() {
    return {
      dialogTitle: "新增字典数据",
      dialogVisible: false,
      // 提交信息
      dialogForm: {
        name: null,
        parentId: null,
        sort: null,
        type: null,
        typeId: null,
        enableState: 0,
        code: null,
      },
      rules: {
        name: [
          { required: true, message: "字典名不能为空！", trigger: "blur" },
        ],
        code: [
          { required: true, message: "编码不能为空！", trigger: "blur" },
        ],
        parentId: [
          { required: false, message: "父级不能为空!", trigger: "change" },
        ],
        sort: [{ required: false, message: "排序", trigger: "blur" }],
        enableState: [
          { required: false, message: "启用状态不能为空！", trigger: "blur" },
        ],
      },
      // 父级信息
      parentArr: [],
      enableStateArr: [
        {
          label: "启用",
          value: 0,
        },
        {
          label: "禁用",
          value: 1,
        },
      ],
    };
  },
  methods: {
    // 打开弹窗
    openDialog(selectType, info) {
      this.getParentArr({
        id: info?.dictionaryId || "",
        type: selectType.name,
      });
      if (info) {
        this.dialogTitle = "编辑字典数据";
        this.dialogForm = {...info};
      } else {
        this.dialogTitle = "新增字典数据";
        this.dialogForm = {
          name: null,
          parentId: null,
          sort: null,
          type: selectType.name,
          typeId: selectType.id,
          enableState: 0,
          code: null,
        };
      }

      this.dialogVisible = true;
    },
    // 获取可用父级
    getParentArr(params) {
      this.$axios
        .post(this.$api.dataConnection.dataDictionary.getDictParent, params)
        .then((res) => {
          if (res.data.code === 200) {
            if (Array.isArray(res.data.data)) {
              this.parentArr = res.data.data.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              });
            }
          } else {
            this.parentArr = [];
          }
        });
    },
    confirmDialog() {
      this.$refs.operaDialogRef.validate((valid, fields) => {
        if (valid) {
          if (this.dialogTitle === "新增字典数据") {
            this.$axios
              .post(
                this.$api.dataConnection.dataDictionary.addDictData,
                this.dialogForm
              )
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message || "操作成功");
                  this.dialogVisible = false;
                  this.$emit("reload");
                } else {
                  this.$message.warning(res.data.message);
                }
              });
          } else {
            this.$axios
              .post(this.$api.dataConnection.dataDictionary.editDictData, {
                ...this.dialogForm,
                id: this.dialogForm.dictionaryId,
              })
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message || "操作成功");
                  this.dialogVisible = false;
                  this.$emit("reload");
                } else {
                  this.$message.warning(res.data.message);
                }
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped></style>
